<template>
    <span class="stars-wrapper">
        <span :class="['iconfont icon-star', { active: starNum >= 1}]" ></span>
        <span :class="['iconfont icon-star', { active: starNum >= 2 }]" ></span>
        <span :class="['iconfont icon-star', { active: starNum >= 3 }]" ></span>
        <span :class="['iconfont icon-star', { active: starNum >= 4 }]" ></span>
        <span :class="['iconfont icon-star', { active: starNum >= 5 }]" ></span>
    </span>
</template>

<script>
export default {
    name: 'Stars',
    props: {
        starNum: Number
    }
}
</script>

<style lang="scss">
 @import '~styles/variables.scss';

 .stars-wrapper {
     color: #ccc;

     .active {
         color: $starColor;
     }
 }

</style>